<template>
    <div>
        <div class="common-form">
            <div class=" logistics">
                <img src="../../../assets/1.jpg"/>
                <div>
                    <p>{{add.shipper_name}}</p>
                    <p>{{add.LogisticCode}}</p>
                </div>
            </div>
        </div>
        
        <div data-mohe-type="kuaidi_new" class="g-mohe " id="mohe-kuaidi_new">
            <div id="mohe-kuaidi_new_nucom">
                <div class="mohe-wrap mh-wrap">
                    <div class="mh-cont mh-list-wrap mh-unfold">
                        <div class="mh-list">
                            <ul>
                                <!-- class="first" -->
                                <li v-for="item in addList">
                                    <p>{{item.AcceptTime}}</p>
                                    <p>{{item.Remark}}{{item.AcceptStation}}</p>
                                    <!-- <span class="before"></span><span class="after"></span><i class="mh-icon mh-icon-new"></i> -->
                                    <span class="before"></span><span class="after"></span>
                                </li>
                                <!-- <li>
                                    <p>2015-04-28 07:38:44</p>
                                    <p>深圳市南油速递营销部安排投递（投递员姓名：蔡远发<a href="tel:18718860573">18718860573</a>;联系电话：）</p>
                                    <span class="before"></span><span class="after"></span></li>
                                <li>
                                    <p>2015-04-28 05:08:00</p>
                                    <p>到达广东省邮政速递物流有限公司深圳航空邮件处理中心处理中心（经转）</p>
                                    <span class="before"></span><span class="after"></span></li>
                                <li>
                                    <p>2015-04-28 00:00:00</p>
                                    <p>离开中山市 发往深圳市（经转）</p>
                                    <span class="before"></span><span class="after"></span></li>
                                <li>
                                    <p>2015-04-27 15:00:00</p>
                                    <p>到达广东省邮政速递物流有限公司中山三角邮件处理中心处理中心（经转）</p>
                                    <span class="before"></span><span class="after"></span></li>
                                <li>
                                    <p>2015-04-27 08:46:00</p>
                                    <p>离开泉州市 发往中山市</p>
                                    <span class="before"></span><span class="after"></span></li>
                                <li>
                                    <p>2015-04-26 17:12:00</p>
                                    <p>泉州市速递物流分公司南区电子商务业务部已收件，（揽投员姓名：王晨光;联系电话：<a href="tel:13774826403">13774826403</a>）</p>
                                    <span class="before"></span><span class="after"></span></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import qs from 'qs'
import url from 'url'
import { formatDate } from "../../../../static/data.js";
    export default {
        name:'seckillOrderDetail',
        data () {
            return {
                url:'http://api.huiwanzhong365.com',
                add:{},
                addList:[],
            }
        },
        methods:{
            detail:function(){
                console.log(this.$route.params.id)
                // /index/merchant/goods/orderDetails
                var that = this
                var openid = localStorage.getItem("openid")
                var upload = {
                    openid:openid,
					order_type:0,
					LogisticCode:this.$route.params.id,
                }
                this.$http.post('/index/merchant/goods/OrderTraces',qs.stringify(upload)).then(rs=>{
                    console.log(rs.data)
                    this.add = rs.data
                    this.addList = rs.data.Traces
                }).catch(err=>{
                    console.log(err)
                })
            }
        },
        mounted(){
            this.detail();
        }
    }
</script>

<style scoped>
.logistics{
    padding:10px;
    display: inline-block;
}
.logistics img{
    width:50px;
    height:50px;
    border-radius: 50%;
    float: left;
}
.logistics div{
    float: left;
    margin-left: 15px;
    line-height: 25px;
}
#mohe-kuaidi_new .mh-list-wrap {
    max-height: 0;
    _height: 0;
    --overflow: hidden;
}
#mohe-kuaidi_new .mh-list-wrap.mh-unfold {
    max-height: 281px;
    _height: 281px;
}
#mohe-kuaidi_new .mh-list-wrap .mh-list {
    border-top: 1px solid #eee;
    margin: 0 15px;
    padding: 15px 0;
}

#mohe-kuaidi_new .mh-list-wrap .mh-list ul {
    max-height: 255px;
    _height: 255px;
    padding-left: 30px;
    padding-right: 20px;
    --overflow: auto;
    height: 626px;
}

#mohe-kuaidi_new .mh-list-wrap .mh-list li {
    position: relative;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 8px;
    padding-bottom: 8px;
    color: #666;
}

#mohe-kuaidi_new .mh-list-wrap .mh-list li.first {
    color: #3eaf0e;
}

#mohe-kuaidi_new .mh-list-wrap .mh-list li p {
    line-height: 20px;
}

#mohe-kuaidi_new .mh-list-wrap .mh-list li .before {
    position: absolute;
    left: -13px;
    top: 2.2em;
    height: 82%;
    width: 0;
    border-left: 2px solid #ddd;
}

#mohe-kuaidi_new .mh-list-wrap .mh-list li .after {
    position: absolute;
    left: -16px;
    top: 1.2em;
    width: 8px;
    height: 8px;
    background: #ddd;
    border-radius: 6px;
}

#mohe-kuaidi_new .mh-list-wrap .mh-list li:nth-child(1) .after {
    background: #3eaf0e;
}

#mohe-kuaidi_new .mh-kd-wrap {
    position: relative;
    border-top: 1px solid #eee;
    padding: 15px;
    padding-bottom: 25px;
    background: #fafafa;
}

    

#mohe-kuaidi_new .mh-icon-t {
    position: absolute;
    left: -9px;
    bottom: 14px;
    width: 10px;
    height: 16px;
    background-position: 0 -34px;
    background-color: white;
}


body {
    color: #666;
    font: 12px/150% Arial,Verdana,"宋体";
}

#mohe-kuaidi_new .mh-icon-new {
    background-position: 0 -58px;
    height: 18px;
    left: -20px;
    margin-left: -41px;
    margin-top: -9px;
    position: absolute;
    top: 1.5em;
    width: 41px;
}

h1, h2, h3, h4, h5, h6, input, textarea, select, cite, em, i, b, strong, th {
    font-size: 100%;
    font-style: normal;
}

#mohe-kuaidi_new .mh-list-wrap .mh-list li:nth-child(1) {
    color: #3eaf0e;
}

#mohe-kuaidi_new .mh-list-wrap .mh-list li {
    color: #666;
}

p, form, ol, ul, li, h3, menu {
    list-style: outside none none;
}

.result .res-list, .result-d .res-d-list {
    font-size: 13px;
    line-height: 20px;
}


body, th, td {
    font-family: arial;
    color: #333;
}
</style>